import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
import "./App.css"
import Home from "./page/home/index"
import Gouwuche from "./page/gouwuche/index"
import Fenlei from "./page/fenlei/index"
import Wode from "./page/wode/index"
import Chaoshi from "./page/chaoshi/index"
import Dianqi from "./page/dianqi/index"
import JDBaihuo from "./page/jdbaihuo/index"
import Login from "./page/wode/login"
function App() {
  let list = [{
    path: "/home/*",
    element: Home
  },
  {
    path: "/fenlei",
    element: Fenlei
  },
  {
    path: "/gouwuche",
    element: Gouwuche
  },
  {
    path: "/wode",
    element: Wode
  },
  {
    path: "/chaoshi",
    element: Chaoshi
  },
  {
    path: "/dianqi",
    element: Dianqi
  }
    , {
    path: "/jdbaihuo",
    element: JDBaihuo
  }
    , {
    path: "/login",
    element: Login
  }
  ];
  let listNavLink = [
    {
      path: "/home",
      bg1: "home-bg1",
      bg2: "home-bg2"
    },
    {
      path: "/fenlei",
      bg1: "fenlei-bg1",
      bg2: "fenlei-bg2"
    },
    {
      path: "/gouwuche",
      bg1: "gouwuche-bg1",
      bg2: "gouwuche-bg2"
    },
    {
      path: "/wode",
      bg1: "wode-bg1",
      bg2: "wode-bg2"
    }
  ];
  return (
    <div>
      <BrowserRouter>
        <Routes>
          {
            list.map((item, i) => (
              <Route key={i} path={item.path} element={<item.element />}> </Route>
            ))
          }
          {/* <Route path="/home" element={<Home />}></Route>
          <Route path="/fenlei" element={<Fenlei />}></Route>
          <Route path="/gouwuche" element={<Gouwuche />}></Route>
          <Route path="/wode" element={<Wode />}></Route> */}
        </Routes>
        <div className='footer'>
          {
            listNavLink.map((item, i) => (
              <NavLink key={i} to={item.path} className={({ isActive }) => isActive ? item.bg2 : item.bg1}></NavLink>
            ))
          }
          {/* <NavLink to="/home" className={({ isActive }) => isActive ? "home-bg2" : "home-bg1"}></NavLink>
          <NavLink to="/fenlei" className={({ isActive }) => isActive ? "fenlei-bg2" : "fenlei-bg1"}></NavLink>
          <NavLink to="/gouwuche" className={({ isActive }) => isActive ? "gouwuche-bg2" : "gouwuche-bg1"}></NavLink>
          <NavLink to="/wode" className={({ isActive }) => isActive ? "wode-bg2" : "wode-bg1"}></NavLink> */}
        </div>
        {/* <div className='footer'>
          <NavLink to="/home"><img src={require('./assets/img/001shouye.png')}></img></NavLink>
          <NavLink to="/fenlei"><img src={require('./assets/img/002fenlei.png')}></img></NavLink>
          <NavLink to="/gouwuche"><img src={require('./assets/img/003gouwuche.png')}></img></NavLink>
          <NavLink to="/wode" > <img src={require('./assets/img/004weidenglu.png')}></img></NavLink>
        </div> */}
        {/* <div className='footer'>
          <NavLink to="/home" className={({ isActive }) => isActive ? "border" : ""}><img src={require('./assets/img/001shouye.png')}></img></NavLink>
          <NavLink to="/fenlei" className={({ isActive }) => isActive ? "border" : ""}><img src={require('./assets/img/002fenlei.png')}></img></NavLink>
          <NavLink to="/gouwuche" className={({ isActive }) => isActive ? "border" : ""}><img src={require('./assets/img/003gouwuche.png')}></img></NavLink>
          <NavLink to="/wode" className={({ isActive }) => isActive ? "border" : ""}> <img src={require('./assets/img/004weidenglu.png')}></img></NavLink>
        </div> */}
      </BrowserRouter >

    </div >
  );
}

export default App;
